import React, { useState, useEffect } from "react";
import { Table, Button, Modal, Tree } from "antd";
import axios from "axios";
import {
  UnorderedListOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons";
export default function RightList() {
  const [dataSource, setdataSource] = useState([]);
  const [rightList, setrightList] = useState([]);
  const [currentRights, setcurrentRights] = useState([]);
  const [currentId, setcurrentId] = useState(0);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);

    setdataSource(
      dataSource.map((item) => {
        if (item.id === currentId) {
          return { ...item, rights: currentRights };
        }
        return item;
      })
    );

    axios
      .patch(`/roles/${currentId}`, {
        rights: currentRights,
      })
      .then((res) => {});
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const columns = [
    {
      title: "id",
      dataIndex: "id",
      render(id) {
        return <b>{id}</b>;
      },
    },
    {
      title: "角色名称",
      dataIndex: "roleName",
    },
    {
      title: "操作",
      render(item) {
        return (
          <div>
            <Button
              danger
              shape="circle"
              onClick={() => {
                confirmMethod(item);
              }}
              icon={<DeleteOutlined />}
            />

            <Button
              type="primary"
              shape="circle"
              icon={<UnorderedListOutlined />}
              onClick={() => {
                showModal();
                setcurrentRights(item.rights);
                setcurrentId(item.id);
              }}
            />
          </div>
        );
      },
    },
  ];

  const deteleMethod = (item) => {
    setdataSource(dataSource.filter((data) => data.id !== item.id));
    // axios.get(`/roles/${item.id}`).then((res) => {});
  };
  const confirmMethod = (item) => {
    Modal.confirm({
      title: "你确定要删除吗？",
      icon: <ExclamationCircleOutlined />,
      okText: "确认",
      cancelText: "取消",
      onOk: () => {
        deteleMethod(item);
      },
    });
  };
  useEffect(() => {
    axios.get("/roles").then((res) => {
      setdataSource(res.data);
    });
  }, []);
  useEffect(() => {
    axios.get("/rights?_embed=children").then((res) => {
      setrightList(res.data);
    });
  }, []);
  const onCheck = (checkedKeys, info) => {
    // console.log("onCheck", checkedKeys, info);
    setcurrentRights(checkedKeys);
  };
  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination="5"
        rowKey={(item) => item.id}
      />
      ;
      <Modal
        title="权限分配"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
      >
        <Tree
          checkable
          treeData={rightList}
          checkedKeys={currentRights}
          onCheck={onCheck}
        />
      </Modal>
    </div>
  );
}
